<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				height: 300px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				// 获取box
				var box = document.getElementById("box");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 为btn01绑定单击响应函数
				btn01.onclick = function(){
					// 修改box的样式
					// 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面,这样执行的性能是比较差的,
					// 而且这种形式当我们要修改多个样式时,也不太方便
					// box.style.width = "200px";
					// box.style.height = "200px";
					// box.style.backgroundColor = "yellow";
					
					// 一行代码可以修改多个样式
					// 修改box的class属性
					// 我们可以通过修改元素的class属性来间接的修改样式,这样一来,我们只需要修改一次,即可同时修改多个样式,
					// 浏览器只需要重新渲染页面一次,性能也比较好,并且这种方式,可以使表现和行为进一步的分离
					// box.className += " b2";
					// addClass(box,"b2");
					// removeClass(box,"b2");
					toggleClass(box,"b2");
				};
			};
			
			// 定义一个函数,用来向一个元素中添加指定的class属性值
			// 参数: obj 要添加class属性的元素  cn 要添加的class值
			function addClass(obj,cn){
				// 检查obj中是否含有cn
				if(!hasClass(obj,cn)){
					obj.className += " "+cn;
				}			
			}
			
			// 判断一个元素中是否含有指定的class属性值
			// 如果有该class,则返回true,没有则返回false
			function hasClass(obj,cn){
				// 判断obj中有没有cn class
				// 创建一个正则表达式
				// var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				return reg.test(obj.className);
			}
			
			// 删除一个元素中的指定的class属性
			function removeClass(obj,cn){
				// 创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				// 删除class
				obj.className = obj.className.replace(reg,"");
			}
			
			// toggleClass可以用来切换一个类
			// 如果元素中具有该类,则删除
			// 如果元素中没有该类,则添加
			function toggleClass(obj,cn){
				// 判断obj中是否含有cn
				if(hasClass(obj,cn)){
					// 有,则删除
					removeClass(obj,cn);
				}else{
					// 没有,则添加
					addClass(obj,cn);
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		<br/><br/>
		<div id="box" class="b1"></div>
	</body>
</html>